import React, { Component } from 'react'
import PubSub from 'pubsub-js';

export default class List extends Component {
  state = {// 初始化状态
    users: [], // users初始值为数组
    isFirst: true, // 是否为第一次打开页面
    isLoading: false, // 标识是否处于加载状态
    err: '', //存储请求相关的错误信息
  } 

  // 挂载订阅消息获取数据
  componentDidMount() {
    this.token = PubSub.subscribe('getGitHub', (_, stateObj) => {
      console.log('getGitHub Data', stateObj);
      this.setState(stateObj)
    })
  }

  // 卸载取消订阅
  componentWillUnmount() {
    PubSub.unsubscribe(this.token)
  }

  render() {
      const { users,isFirst, isLoading, err } = this.state;
    return (
      <>
        <div className="row">
            {
                isFirst ? <h2>欢迎使用,输入关键字,随后点击搜索</h2> :
                isLoading ? <h2>Loading.....</h2> : 
                err ? <h2>出现了错误</h2> : 
                users.map((item) => {
                return (
                    <div key={item.id} className="card">
                    <a rel="noreferrer" href={item.html_url} target="_blank">
                        <img
                        alt="head_portrait"
                        src={item.avatar_url}
                        style={{ width: '100px' }}
                        />
                    </a>
                    <p className="card-text">{item.login}</p>
                    </div>
                )
                })
            }
          {}
        </div>
      </>
    )
  }
}
